import * as React from 'react';
import { IPublicModelPluginContext } from '@alilc/lowcode-types';
import { LinkOutlined } from '@ant-design/icons';

const LowcodeApiPlugin = (ctx: IPublicModelPluginContext, options: any) => {
  return {
    // 插件的初始化函数，在引擎初始化之后会立刻调用
    init() {
      // 你可以拿到插件注册时的初始化参数
      // console.log(options.name);

      // 往引擎增加面板
      ctx.skeleton.add({
        area: 'leftArea',
        name: 'LowcodeApiPluginPane',
        type: 'PanelDock',
        props: {
          icon: <LinkOutlined style={{fontSize:'large'}} />,
          description: '实体建模',
        },
        content: (<>
        <iframe
        src="http://localhost:8080/swagger-ui.html" // 替换为你的后端 Swagger 页面地址
        width="100%"
        height="800px"
        title="Swagger UI"
        style={{ border: 'none' }}
      />
        </>),
        panelProps: {
          floatable: true, // 是否可浮动
          height: 300,
          hideTitleBar: false,
          maxHeight: 800,
          maxWidth: 1000,
          title: "接口文档",
          width: 1300,
        },
      });

      ctx.logger.log('打个日志');
    },
  };
};

// 插件名，注册环境下唯一
LowcodeApiPlugin.pluginName = 'LowcodeApiPlugin';
LowcodeApiPlugin.meta = {
  // 依赖的插件（插件名数组）
  dependencies: [],
  engines: {
    lowcodeEngine: '^1.1.0', // 插件需要配合 ^1.1.0 的引擎才可运行
  },
}

export default LowcodeApiPlugin;
